@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/demand/list.css')}}">

@section('content')
<div class="main" id="storeList" v-loading="loading" v-cloak>
    <div class="storelistSwiper">
        <!-- <div id="news_swiper" class="carousel slide" data-interval="5000">
            <ol class="carousel-indicators">
                <li data-target="#news_swiper" v-for="(item,index) in swiperData" :data-slide-to="index" :class="{active:index==0}"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item" :class="{active:index==0}" v-for="(item,index) in swiperData">
                    <a :href="item.link">
                        <img :src="item.thumb" alt="..."></a>
                </div>
            </div>
        </div> -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in swiperData">
                    {{--<a :href="item.link" style="display:block;width:100%;height:100%">--}}
                        {{--<img :src="item.thumb" alt="..." style="width:100%;height:100%">--}}
                    {{--</a>--}}
                    <a v-if="item.target!=2" :href="item.link" target="_blank" style="display:block;width:100%;height:100%">
                        <img :src="item.thumb" alt="..." style="width:100%;height:100%">
                    </a>
                    <a v-else :href="item.link" style="display:block;width:100%;height:100%">
                        <img :src="item.thumb" alt="..." style="width:100%;height:100%">
                    </a>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="storelistMain">
        <div class="storelistTitle" :style="{height: type == 1 ? 'auto' : '38px'}">
            <span class="storelistTitle_left">
                <span>当前位置：</span>
                <span><a href="{{route('home.index.index') }}">首页</a> > 所有需求</span>
            </span>
            <span class="storelistTitle_right" v-if="type == 1">
                <span>找不到合适的供应商？发个需求试试？</span>
                <button @click=" window.location.href = '{{ route('home.demand.demandAdd') }}'">免费发布需求</button>
            </span>
        </div>
        <div class="storelistMenu">
            <div class="storelistMenu_one">
                <span class="storelist_firstStage">一级分类</span>
                <div class="storelist_option" ref="unfoldall_one">
                    <span :class="{active:cid==''}" @click="cid=''">全部</span>
                    <span v-for="item in cidData" :class="{active:cid==item.id}" @click="cid=item.id;cid_id=''">
                        @{{item.name}}
                    </span>
                </div>
                <a v-if="unfoldall_oneHeight>25">
                    <span class="unfoldall" v-if="!unfoldall_one" @click="unfoldall(0)"> 展开全部<img src="{{URL::asset('./img/store/storelist_down.png')}}" alt=""></span>
                    <span class="unfoldall" v-else @click="unfoldallTrue(0)"> 收起全部<img src="{{URL::asset('./img/store/storelist_up.png')}}" alt=""></span>
                </a>
            </div>
            <div class="storelistMenu_one">
                <span class="storelist_firstStage">二级分类</span>
                <div class="storelist_option" ref="unfoldall_two">
                    <span :class="{active:cid_id==''}" @click="cid_id=''">全部</span>
                    <span v-for="item in cid_idData" :class="{active:cid_id==item.id}" @click="cid_id=item.id">
                        @{{item.name}}
                    </span>
                </div>
                <a v-if="unfoldall_twoHeight>25">
                    <span class="unfoldall" v-if="!unfoldall_two" @click="unfoldall(1)"> 展开全部<img src="{{URL::asset('./img/store/storelist_down.png')}}" alt=""></span>
                    <span class="unfoldall" v-else @click="unfoldallTrue(1)"> 收起全部<img src="{{URL::asset('./img/store/storelist_up.png')}}" alt=""></span>
                </a>
            </div>
            <div class="storelistMenu_one">
                <span class="storelist_firstStage">截止时间</span>
                <div class="storelist_option" ref="unfoldall_three">
                    <span :class="{active:end==''}" @click="end=''">全部</span>
                    <span :class="{active:end==1}" @click="end=1">一天内</span>
                    <span :class="{active:end==2}" @click="end=2">三天内</span>
                    <span :class="{active:end==3}" @click="end=3">七天内</span>
                    <span :class="{active:end==4}" @click="end=4">一个月内</span>
                    <span :class="{active:end==5}" @click="end=5">一个月以上</span>
                </div>
                <a v-if="unfoldall_threeHeight>25">
                    <span class="unfoldall" v-if="!unfoldall_three" @click="unfoldall(2)"> 展开全部<img src="{{URL::asset('./img/store/storelist_down.png')}}" alt=""></span>
                    <span class="unfoldall" v-else @click="unfoldallTrue(2)"> 收起全部<img src="{{URL::asset('./img/store/storelist_up.png')}}" alt=""></span>
                </a>
            </div>
            <div class="storelistMenu_one">
                <span class="storelist_firstStage">预算区间</span>
                <div class="storelist_option" ref="unfoldall_four">
                    <span :class="{active:budget==''}" @click="budget=''">全部</span>
                    <span :class="{active:budget==1}" @click="budget=1">0-1万元</span>
                    <span :class="{active:budget==2}" @click="budget=2">1万-5万</span>
                    <span :class="{active:budget==3}" @click="budget=3">5万-10万</span>
                    <span :class="{active:budget==4}" @click="budget=4">10万-50万</span>
                    <span :class="{active:budget==5}" @click="budget=5">50万-100万</span>
                    <span :class="{active:budget==6}" @click="budget=6">100万以上</span>
                </div>
                <a v-if="unfoldall_fourHeight>25">
                    <span class="unfoldall" v-if="!unfoldall_four" @click="unfoldall(3)"> 展开全部<img src="{{URL::asset('./img/store/storelist_down.png')}}" alt=""></span>
                    <span class="unfoldall" v-else @click="unfoldallTrue(3)"> 收起全部<img src="{{URL::asset('./img/store/storelist_up.png')}}" alt=""></span>
                </a>
            </div>
            <div class="storelistMenu_one">
                <span class="storelist_firstStage">区域</span>
                <div class="storelist_option" ref="unfoldall_five">
                    <span :class="{active:area==''}" @click="area=''">全国</span>
                    <span v-for="item in areaData" :class="{active:area==item.id}" @click="area=item.id">
                        @{{item.name}}
                    </span>
                </div>
                <a v-if="unfoldall_fiveHeight>25">
                    <span class="unfoldall" v-if="!unfoldall_five" @click="unfoldall(4)"> 展开全部<img src="{{URL::asset('./img/store/storelist_down.png')}}" alt=""></span>
                    <span class="unfoldall" v-else @click="unfoldallTrue(4)"> 收起全部<img src="{{URL::asset('./img/store/storelist_up.png')}}" alt=""></span>
                </a>
            </div>
            <div class="storelistMenu_one" style="border-bottom:0">
                <span class="storelist_firstStage">需求状态</span>
                <div class="storelist_option">
                    <span :class="{active:bid==''}" @click="bid=''">全部</span>
                    <span :class="{active:bid==2}" @click="bid=2">投标中</span>
                    <span :class="{active:bid==3}" @click="bid=3">已完成</span>
                </div>
            </div>
            
        </div>
        <div class="storeListContent">
            <div class="storeListContent_left">
            <div class="storelistMenu_two">
                <span :class="{active:orderByIndex==0}" @click="handleOrderBy(0)">
                    综合指标
                </span>
                <span :class="{active:orderByIndex==1}" @click="handleOrderBy(1)">
                    截止时间
                    <span class="storeListOrderBy">
                        <i class="orderByAsc" @click.stop="handleOrderByTo(1,'asc')" :class="{active:orderByBoo=='asc'}"></i>
                        <i class="orderByDesc" @click.stop="handleOrderByTo(1,'desc')" :class="{active:orderByBoo=='desc'}"></i>
                    </span>
                </span>
                <span :class="{active:orderByIndex==2}" @click="clickUrgent">
                    <span class="check" :class="{active:urgent==2}">
                        <img src="{{URL::asset('./img/icon/gou.png')}}">
                    </span>
                    加急
                </span>
            </div>
                <div class="ssa" v-for="(item,index) in listData">
                    <a @click="details(item.id)">
                        <!-- <el-tooltip class="item" effect="dark" :content="item.price+'万'" placement="top-start">
                            <div class="ssaMoney" >
                                ￥@{{item.price}}万
                            </div>
                        </el-tooltip> -->
                        <div class="ssaContent">
                            <div class="ssaTitle">
                                <p class="text">￥@{{item.price}}万</p>
                                <p class="text1">@{{item.title}}</p>
                            </div>
                            <div class="jiajiBox">
                                <p class="jiaji" v-if="item.urgent==2">加急</p>
                                <p class="toubiao active" v-if="item.bid==2 && (item.number != item.limit_num) && item.end_state == 0">投标中</p>
                                <p class="toubiao" v-else>已完成</p>
                                <p class="text">总竞标名额：@{{item.limit_num}}</p>
                                <p class="text1">剩余竞标名额：@{{item.limit_num - item.number || 0}}</p>
                            </div>
                            <div class="time_box">
                                <p class="text">发布时间：@{{item.start_at}}</p>
                                <p class="text1">截止时间：@{{item.end_at}}</p>
                            </div>
                            <p class="xqDetail">需求详情：@{{item.content}}</p>
                        </div>
                        <div class="lookDetail">查看详情</div>
                    </a>
                </div>
                <div class="elementPage" style="margin-top: 20px;" v-if="pageCount>0">
                    <el-pagination :pager-count="5" @current-change="handleCurrentChange" :current-page.sync="pageNumber" background prev-text="上一页" next-text="下一页" layout="prev, pager, next,jumper" :total="pageCount">
                    </el-pagination>
                </div>
            </div>
            <div class="storeListContent_right">
                <div class="rapidRelease" @mouseleave="QRcodeDialog=false">
                    <div class="rapidRelease_header">
                        <span>快速发布需求</span>
                        <span>众多商家主动参与，轻松挑选满意方案！</span>
                    </div>
                    <div class="rapidRelease_input">
                        <el-form :model="form" ref="ruleForm">
                            <el-form-item prop="tel" :rules="telRule">
                                <el-input v-model="form.tel" type="text" placeholder="您的手机号" />
                                </el-input>
                            </el-form-item>
                        </el-form>
                        <button @click="submitForm('ruleForm')">
                            立即发布
                        </button>
                    </div>
                    <div class="rapidRelease_right">
                    </div>
                    <div class="rapidRelease_QRcode" v-show="QRcodeDialog">
                        <span>扫码进入微信公众号</span>
                        <span>手机快捷发布</span>
                        <img :src="overall.public_code">
                    </div>
                    <img @mouseenter.stop="QRcodeDialog=true" src="{{URL::asset('./img/store/rapidRelease_right.png')}}" class="rapidRelease_rightImg">
                </div>
                <div class="publicityImg" v-for="(item,index) in advsData">
                    {{--<a :href="item.link">--}}
                        {{--<img :src="item.thumb">--}}
                    {{--</a>--}}
                    <a v-if="item.target!=2" :href="item.link" target="_blank">
                        <img :src="item.thumb">
                    </a>
                    <a v-else :href="item.link">
                        <img :src="item.thumb">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="swiperAni_footer" v-if="type == 1">
        <div class="swiperAni_footer-content">
            <span class="fabu">10秒发布需求，<span class="fabu" style="color:#FFE431;margin:0">快速匹配服务商</span></span>
            <input type="text" v-model="mobile" placeholder="请输入手机号码" style="height:40px;width:130px;padding-left:5px">
            <!-- <button class="free_button" @click=" window.location.href = '{{ route('home.demand.demandAdd') }}'">免费发布</button> -->
            <button class="free_button"  @click="freeFb">免费发布</button>
            <div class="fabu_QRcode">
                <div>
                    <el-popover placement="top" trigger="hover">
                        <div class="QR_mess_detail">
                            <p>扫码进入微信公众号</p>
                            <p class="QR_mess_detail_2">随时随地发布需求</p>
                            <img :src="public_code['public_code']">
                        </div>
                        <span slot="reference">
                            <img :src="public_code['public_code']">
                        </span>
                    </el-popover>
                </div>
                <div class="QR_mess">
                    <a>
                        <p class="QR_mess_title">进入公众号</p>
                        <p class="QR_mess_content">随时随地</p>
                        <p class="QR_mess_content">发布需求</p>
                    </a>
                </div>
            </div>
            <span class="swiperAni_guanbi" @click="swiperFooterClose">X</span>

        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
    $(() => {
        let app = new Vue({
            el: '#storeList',
            data: () => {
                return {
                    cid: '',
                    cid_id: '',
                    end: '',
                    budget: '',
                    area: '',
                    bid: '',
                    orderByIndex: 0,
                    orderByBoo: 'desc',
                    urgent: 1,
                    overall: JSON.parse(sessionStorage.getItem("overall")) || {},
                    // 

                    swiperData: [],
                    loading: false,
                    pageNumber: 1,
                    pageCount: 0,
                    listData: [],
                    cidData: [],
                    cid_idData: [],
                    areaData: [],
                    //   
                    QRcodeDialog: false,
                    unfoldall_one: false,
                    unfoldall_oneHeight: false,
                    unfoldall_two: false,
                    unfoldall_twoHeight: false,
                    unfoldall_three: false,
                    unfoldall_threeHeight: false,
                    unfoldall_four: false,
                    unfoldall_fourHeight: false,
                    unfoldall_five: false,
                    unfoldall_fiveHeight: false,
                    advsData: [],
                    form: {
                        tel: '',
                    },
                    telRule: [{
                        required: true,
                        validator: validateTel,
                        trigger: 'blur'
                    }],
                    mobole:'',
                    type: 1,
                    public_code:[]
                }
            },
            watch: {
                bid(newV) {
                    this.getList();
                },
                cid(newV) {
                    this.getList();
                },
                cid_id(newV) {
                    this.getList();
                },
                end(newV) {
                    this.getList();
                },
                budget(newV) {
                    this.getList();
                },
                area(newV) {
                    this.getList();
                },
            },
            created() {
                // if(sessionStorage.getItem("HRuserDetails")) {
                let userName=JSON.parse(sessionStorage.getItem("HRuserDetails"));
                if (userName!=undefined&&userName.type!=2) {
                    this.form.tel = JSON.parse(sessionStorage.getItem("HRuserDetails")).mobile;
                    this.type = JSON.parse(sessionStorage.getItem("HRuserDetails")).type;
                    this.mobile = JSON.parse(sessionStorage.getItem("HRuserDetails")).mobile;
                }else {
                    this.mobile = '';
                    this.type = 1;
                    this.form.tel = '';
                }
                apiAjax("{{ route('home.public.advs')}}", 'get', {
                    adsense_id: 26
                }, (res) => {
                    if (res.code == 0) {
                        this.swiperData = res.data;
                        // $('.carousel').carousel('cycle')
                        this.$nextTick(()=>{
                            var swiper = new Swiper('.swiper-container', {
                                pagination: {
                                    el: '.swiper-pagination',
                                    clickable: true,
                                },
                                loop: true,
                                autoplay:true,
                                autoplayDisableOnInteraction : false,
                            });
                        })
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {

                });
                apiAjax("{{ route('home.public.advs')}}", 'get', {
                    adsense_id: 27
                }, (res) => {
                    if (res.code == 0) {
                        this.advsData = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {

                });
                // 获取底部广告公众二维码
                $.get("{{ route('home.public.config') }}", (res) => {
                    this.public_code = res.data || []
                });
                this.getList();
            },
            mounted() {

            },
            methods: {
                freeFb(){
                if(!this.mobile) return this.$message({
                            message: "请输入您的手机号码",
                            type: 'warning'
                        });
                apiAjax("{{ route('home.public.hrQuickDemandApi')}}", 'post', {
                    mobile: this.mobile
                }, (res) => {
                    if (res.code == 0) {
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });

                    }
                }, (erro) => {

                });
            },
                details(id) {
                    if (sessionStorage.getItem("HRuserDetails")) {
                        if (JSON.parse(sessionStorage.getItem("HRuserDetails")).type == 2) {
                            window.location.href = "{{ route('home.demand.demandSupplierDetails') }}?demandId=" + id + "&cid=" +
                                this.cid;
                        } else {
                            window.location.href = "{{ route('home.demand.demandHRDetails') }}?demandId=" + id + "&cid=" +
                                this.cid;
                        }
                    } else {
                        this.$message({
                            message: "请先登录账号！！",
                            type: 'warning'
                        });
                    }
                },
                unfoldall(index) {
                    if (index == 0) {
                        this.unfoldall_one = true;
                    }
                    if (index == 1) {
                        this.unfoldall_two = true;
                    }
                    if (index == 2) {
                        this.unfoldall_three = true;
                    }
                    if (index == 3) {
                        this.unfoldall_four = true;
                    }
                    if (index == 4) {
                        this.unfoldall_five = true;
                    }
                    $(".storelist_option").eq(index).css("height", 'inherit')
                },
                unfoldallTrue(index) {
                    if (index == 0) {
                        this.unfoldall_one = false;
                    }
                    if (index == 1) {
                        this.unfoldall_two = false;
                    }
                    if (index == 2) {
                        this.unfoldall_three = false;
                    }
                    if (index == 3) {
                        this.unfoldall_four = false;
                    }
                    if (index == 4) {
                        this.unfoldall_five = false;
                    }
                    $(".storelist_option").eq(index).css("height", '35px')

                },
                // 排序
                handleOrderBy(index) {
                    this.orderByIndex = index;
                    this.orderByBoo = 'desc';
                    this.getList();
                },
                handleOrderByTo(index, str) {
                    if (this.orderByIndex != index) {
                        this.orderByIndex = index;
                    }
                    this.orderByBoo = str;
                    this.getList();
                },
                //加急
                clickUrgent() {
                    if (this.urgent == 1) {
                        this.urgent = 2
                    } else {
                        this.urgent = 1
                    }
                    this.getList()
                },
                // 分页
                handleCurrentChange(val) {
                    this.pageNumber = val;
                    this.getList()
                },

                //关闭底部
                swiperFooterClose() {
                    $(".swiperAni_footer").fadeOut();
                },
                getList() {

                    let data = {
                        page:this.pageNumber,
                        // cid: this.stairClassify == 'all' ? '' : this.stairClassify,
                        // cid_id: this.secondClassify == 'all' ? '' : this.secondClassify,
                        cid: this.cid,
                        cid_id: this.cid_id,
                        end: this.end,
                        budget: this.budget,
                        area: this.area,
                        bid: this.bid,
                        sid: this.orderByIndex,
                        orderby: this.orderByBoo,
                        urgent: this.urgent,
                        keyword: getQueryString("keyword") || ''
                    }
                    apiAjax("{{ route('home.demand.demandListsApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.areaData = res.data.area;
                            this.cidData = res.data.cate_id;
                            this.cid_idData = res.data.children;
                            this.pageCount = res.data.demand.total;
                            this.listData = res.data.demand.data;
                            console.log(res.data.demand.data);
                            setTimeout(() => {
                                this.unfoldall_oneHeight = this.$refs.unfoldall_one.scrollHeight
                                this.unfoldall_twoHeight = this.$refs.unfoldall_two.scrollHeight
                                this.unfoldall_threeHeight = this.$refs.unfoldall_three.scrollHeight
                                this.unfoldall_fourHeight = this.$refs.unfoldall_four.scrollHeight
                                this.unfoldall_fiveHeight = this.$refs.unfoldall_five.scrollHeight
                            }, 100);
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let data = {
                                mobile: this.form.tel
                            }
                            apiAjax("{{ route('home.public.hrQuickDemandApi')}}", 'post', data, (res) => {
                                if (res.code == 0) {
                                    this.$message({
                                        message: res.msg,
                                        type: 'success'
                                    });
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });

                                }
                            }, (erro) => {

                            });
                        } else {
                            return false;
                        }
                    });
                },
            }
        })
    })
</script>
@endsection